import React from 'react';
import { Card, Table, Tag, Space, Breadcrumb, Progress, Button } from 'antd';
import { HomeOutlined, EyeOutlined } from '@ant-design/icons';
import { Link, useNavigate } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './ProcessList.module.less';

interface ProcessItem {
  id: string;
  projectName: string;
  projectCode: string;
  currentStage: 'pre-apply' | 'pre-acceptance' | 'formal-acceptance' | 'summary';
  startTime: string;
  endTime?: string;
  status: string;
  progress: number;
  manager: string;
}

const stageMap = {
  'pre-apply': { text: '预验收申请', color: 'blue', path: '/pre-acceptance' },
  'pre-acceptance': { text: '预验收阶段', color: 'processing', path: '/pre-acceptance/process' },
  'formal-acceptance': { text: '正式验收阶段', color: 'warning', path: '/formal-acceptance' },
  'summary': { text: '验收总结阶段', color: 'success', path: '/summary/reform' }
};

const ProcessList: React.FC = () => {
  const navigate = useNavigate();

  const handleViewDetail = (record: ProcessItem) => {
    const path = stageMap[record.currentStage].path;
    navigate(path);
  };

  const columns = [
    {
      title: '项目名称',
      dataIndex: 'projectName',
      key: 'projectName',
      width: '20%',
      render: (text: string) => (
        <span className={styles.projectName}>{text}</span>
      )
    },
    {
      title: '项目编号',
      dataIndex: 'projectCode',
      key: 'projectCode',
      width: '15%',
    },
    {
      title: '当前阶段',
      dataIndex: 'currentStage',
      key: 'currentStage',
      width: '15%',
      render: (stage: keyof typeof stageMap) => {
        const { text, color } = stageMap[stage];
        return <Tag color={color}>{text}</Tag>;
      }
    },
    {
      title: '进度',
      dataIndex: 'progress',
      key: 'progress',
      width: '15%',
      render: (progress: number) => (
        <div className={styles.progressWrapper}>
          <Progress percent={progress} size="small" />
        </div>
      )
    },
    {
      title: '负责人',
      dataIndex: 'manager',
      key: 'manager',
      width: '10%',
    },
    {
      title: '开始时间',
      dataIndex: 'startTime',
      key: 'startTime',
      width: '12%',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: '8%',
      render: (status: string) => (
        <Tag color={status === '进行中' ? 'processing' : status === '已完成' ? 'success' : 'default'}>
          {status}
        </Tag>
      )
    },
    {
      title: '操作',
      key: 'action',
      width: '10%',
      render: (_: any, record: ProcessItem) => (
        <Button 
          type="link" 
          icon={<EyeOutlined />}
          onClick={() => handleViewDetail(record)}
        >
          查看
        </Button>
      )
    }
  ];

  const data: ProcessItem[] = [
    {
      id: '1',
      projectName: '示范区档案管理项目',
      projectCode: 'PRJ001',
      currentStage: 'pre-apply',
      startTime: '2024-03-15',
      endTime: '2024-04-15',
      status: '进行中',
      progress: 30,
      manager: '张三'
    },
    {
      id: '2',
      projectName: '数字档案馆建设项目',
      projectCode: 'PRJ002',
      currentStage: 'pre-acceptance',
      startTime: '2024-03-10',
      endTime: '2024-05-10',
      status: '进行中',
      progress: 45,
      manager: '李四'
    },
    {
      id: '3',
      projectName: '档案信息化升级项目',
      projectCode: 'PRJ003',
      currentStage: 'formal-acceptance',
      startTime: '2024-02-20',
      endTime: '2024-04-20',
      status: '进行中',
      progress: 75,
      manager: '王五'
    },
    {
      id: '4',
      projectName: '历史档案数字化项目',
      projectCode: 'PRJ004',
      currentStage: 'summary',
      startTime: '2024-01-15',
      endTime: '2024-03-15',
      status: '已完成',
      progress: 100,
      manager: '赵六'
    }
  ];

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: '监管进程',
          }
        ]} />
      </div>

      <Card 
        title="监管进程列表" 
        className={styles.listCard}
      >
        <Table 
          columns={columns} 
          dataSource={data}
          rowKey="id"
          pagination={{
            pageSize: 10,
            showTotal: total => `共 ${total} 条`,
            showQuickJumper: true,
            showSizeChanger: true
          }}
          className={styles.table}
        />
      </Card>
    </MainLayout>
  );
};

export default ProcessList; 